<template>
   <div class="login_content">
    <div class="container">
      <div class="hold30"></div>
      <div class="hold50 hidden-xs"></div>
      <form role="form" id="loginAccount_tel">
        <!--        手机号-->
        <div class="row">
          <div class="col-xs-12 col-md-offset-3 col-md-6">
            <div class="form-group">
              <div class="form-inline Hj-validPhone">
                <div class="dropdown">
                  <input type="text" class="form-control" id="reg_telCode" data-toggle="dropdown" value="+86" data-rule-required="true" data-msg-required="请选择国际区号" data-rule-rangelength="[1,6]" data-msg-rangelength="参数错误" readonly>
                  <ul class="dropdown-menu" role="menu">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-val="+1"><span class="col-xs-5">+1</span><small><span class="col-xs-6">（美国）</span></small></a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-val="+86"><span class="col-xs-5">+86</span><small><span class="col-xs-6">（加拿大）</span></small></a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" data-val="+5644"><span class="col-xs-5">+5644</span><small><span class="col-xs-6">（中国）</span></small></a></li>
                  </ul>
                </div>
                <div class="Hj-shell">
                  <input type="number" v-model="phone" class="form-control" name="reg_phone" id="reg_phone" placeholder="请输入手机号码" v-validate="'required|phone'" data-vv-as="电话号码"  ref="input" maxlength="11">
              	  <p  v-show="errors.has('reg_phone')" class="form_error_info text-danger bg-danger" v-cloak>{{errors.first('reg_phone')}}</p>
                </div>
                
              </div>
            </div>
          </div>
          <div class="hold10"></div>
          <div class="hold5"></div>
        </div>
        <!--        图形验证码·短信发第二次则需要填写-->
        <div class="row" v-if="picYzm">
          <div class="col-xs-12 col-md-offset-3 col-md-6">
            <div class="form-group">
              <div class="form-inline Hj-imgCaptcha">
                <div class="Hj-shell" id="Hj-shell">
                  <input type="text" class="form-control" name="reg_imgCaptcha" id="reg_imgCaptcha">
                </div>
                <p id="GetcaptchaImg"><img src="" alt="验证码" class="reg_captchaImg"></p>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>
        <!--        短信验证码-->
        <div class="row">
          <div class="col-xs-12 col-md-offset-3 col-md-6">
            <div class="form-group">
              <div class="form-inline Hj-typePhoneCaptcha">
                <div class="Hj-shell">
                  <input type="text" class="form-control" v-model="words" name="reg_phoneCaptcha" id="reg_phoneCaptcha" v-validate="'required'" placeholder="请输入短信验证码" data-vv-as="验证码">
                   <p  v-show="errors.has('reg_phoneCaptcha')" class="form_error_info text-danger bg-danger" v-cloak>{{errors.first('reg_phoneCaptcha')}}</p>
                </div>
                <button v-if='button' type="button" class="btn btn-primary" id="reg_getPhoneCaptcha" @click="inpfocus" >获取短信验证</button>
                <button v-if='!button' type="button" class="btn btn-primary" id="reg_getPhoneCaptcha">60s重发</button>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
          <div class="hold20"></div>
        </div>
        <div class="form-group text-center">
          <div class="row">
            <div class="col-xs-12 col-md-offset-5 col-md-2" @click="handleSubmit">
              <a href="#" type="button" class="btn btn-primary btn-block" id="btnSubmit">&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;</a>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
    data () {
    return {
     //验证码状态
     buttonType:true,
     //图形验证码	
      picYzm:false,
      button:true,
      //手机号
      phone:'',
      words:'',
    }
  },
  methods: {
  	//点击获取验证码事件
  	inpfocus(){
  		console.log(this.buttonType)
  		if(this.phone == '' || !/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(this.phone)){
  			this.$refs.input.focus()
  		}else{
  			this.buttonType = false
  			this.button = false
  		}
	},
  	//点击提交按钮
  	handleSubmit(){
  		console.log()
  		if(this.phone == '' || this.words == ''){
  			this.$validator.validateAll().then((result)=>{ })
  		}else{
  			this.$router.push('/');
  		}
		 
  	}
  },
}
</script>
<style scoped="scoped">
	.form_error_info{
		 padding: 5px 10px;
		 margin: 5px 0 0 0;
	}
	input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>
